<template>
	<view class="pages">
		<view class="header flex">
			<!-- <view class="flex "> -->
			<view @click="toggleUser">
				<u-avatar :src="src" size="mini"></u-avatar>
			</view>
			<text class="header_area" @click="showCitySelector=true">{{ city }}</text>
			<u-icon name="arrow-down" color="#333333" size="28"></u-icon>
			<view class="f1"></view>
			<image src="../../../static/images/ssk_ss.png" class="cm_action"></image>
			<city-select v-model="showCitySelector" @city-change="cityChange"></city-select>
			<!-- </view> -->
		</view>

		<view class="banner">
			<u-swiper name="Text" :list="banners" @click="click" :effect3d="false" :height="350"></u-swiper>
		</view>

		<view class="content">
			<view class="boxs">
				<view class="formItems">
					<view class="formLabal">取车地点<view
							style="float: right;display:flex;flex-direction: row;align-items: center;">异地还车<u-switch
								v-model="isAnthorPlaceBack" size='30' style="margin-left: 8rpx;"></u-switch>
						</view>
					</view>
					<view class="formContent" @click="chooseTakePlace()">
						<text>{{takePlace}}</text>
						<u-icon name="arrow-right" color="#666" size="28"></u-icon>
					</view>
					<view class="line"></view>
				</view>
				<view class="formItems" v-show="isAnthorPlaceBack">
					<view class="formLabal">还车地点</view>
					<view class="formContent" @click="chooseBackPlace()">
						<text>{{backPlace}}</text>
						<u-icon name="arrow-right" color="#666" size="28"></u-icon>
					</view>
				</view>
				<view @click="show=true">
					<RentingTime customstyle="background:#f8f8f8" ref="RentingTime" />
				</view>
				<u-button shape="circle" @click="_nav" :custom-style="{width:'100%',marginTop:'40rpx'}" type="primary">
					立即选车</u-button>
			</view>
			<u-calendar v-model="show" :mode="mode" @change="chooseRange" style="margin-bottom: 50px;" start-text="取车时间"
				end-text='还车时间' :min-date="today" :max-date="targetDay">
				<view slot="tooltip">
					<view class="title">
						请选择取车/还车时间
					</view>
				</view>
			</u-calendar>
			<view class="boxs menus">
				<u-grid :col="4" :border="false">
					<u-grid-item @click="toOrder()">
						<!-- <u-avatar src="../../../static/images/sy_bm.png" :size="90"></u-avatar> -->
						<image src="../../../static/images/sy_xc.png" mode="scaleToFill"
							style="width: 90rpx;height: 90rpx;"></image>
						<view class="grid-text">我的预约</view>
					</u-grid-item>
					<u-grid-item @click="toPublish()">
						<!-- <u-avatar src="../../../static/images/sy_xx.png" :size="90"></u-avatar> -->
						<image src="../../../static/images/sy_kf.png" mode="scaleToFill"
							style="width: 90rpx;height: 90rpx;"></image>
						<view class="grid-text">我的发布</view>
					</u-grid-item>
					<u-grid-item @click="toCar()">
						<!-- <u-avatar src="../../../static/images/sy_tx.png" :size="90"></u-avatar> -->
						<image src="../../../static/images/mc_esc.png" mode="scaleToFill"
							style="width: 90rpx;height: 90rpx;"></image>
						<view class="grid-text">我的车辆</view>
					</u-grid-item>
					<u-grid-item @click="toMyInfo()">
						<image src="../../../static/images/mc_wx.png" mode="scaleToFill"
							style="width: 90rpx;height: 90rpx;"></image>
						<!-- <u-avatar src="../../../static/images/sy_zq.png" :size="90"></u-avatar> -->
						<view class="grid-text">个人信息</view>
					</u-grid-item>
				</u-grid>

			</view>

		</view>
		<u-popup v-model="userPanel" mode="left" width="500rpx">
			<view class="userBox u-flex-y">
				<u-avatar :src="src" size="large"></u-avatar>
				<view>{{$store.state.userInfo.username}}</view>
				<view class="listBar">
					<u-cell-group title=" ">
						<u-cell-item title="我的预约" arrow  @click="toOrder()">
							<image src="../../../static/images/cb_xc.png" mode="aspectFill" class="licons" slot="icon">
							</image>
						</u-cell-item>
						<u-cell-item title="我的发布" arrow @click="toPublish()">
							<image src="../../../static/images/cb_fp.png" mode="aspectFill" class="licons" slot="icon">
							</image>
						</u-cell-item>
						<u-cell-item title="我的车辆" arrow @click="toPublish()">
							<image src="../../../static/images/cb_zl.png" mode="aspectFill" class="licons" slot="icon">
							</image>
						</u-cell-item>
						<u-cell-item title="个人信息" arrow  @click="toMyInfo()()">
							<image src="../../../static/images/cb_sz.png" mode="aspectFill" class="licons" slot="icon">
							</image>
						</u-cell-item>
						<u-cell-item title="退出登录" arrow  @click="logout()()">
							<image src="../../../static/images/cb_gd.png" mode="aspectFill" class="licons" slot="icon">
							</image>
						</u-cell-item>
					</u-cell-group>

				</view>
			</view>
		</u-popup>
		<u-top-tips ref="uTips" :z-index="10100" :navbar-height="0"></u-top-tips>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	const global_Set_zdjy = uni.getStorageSync('global_Set_zdjy');
	import RentingTime from '@/components/RentingTime.vue'
	import * as util from '@/common/utils.js'
	var formatLocation = util.formatLocation;
	import moment from 'moment'
	import citySelect from "@/pages/features/citySelect/citySelect.vue"

	export default {
		data() {
			return {
				isAnthorPlaceBack: false,
				city: '未定位',
				showCitySelector: false,
				today: moment().format('YYYY-MM-DD'),
				targetDay: moment().add(2, 'years').format('YYYY-MM-DD'),
				show: false,
				mode: 'range',
				location: {},
				locationAddress: '',
				baseKey: 'GetCourseList',
				show: false,
				userPanel: false,
				banners: [{
					Text: 'https://s1.ax1x.com/2022/06/29/jn3Vvq.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					Text: 'https://s1.ax1x.com/2022/06/29/jnGj29.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					Text: 'https://s1.ax1x.com/2022/06/29/jnJi5D.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				}],
				iconList: [],
				tableList: [],
				list: [1],
				lists: [],
				modalMsg: {
					content: '',
					src: ''
				},
				src: '',
				hasRow: 'ListInfo',
				listForm: {
					date: 10
				},
				takePlace: '请选择取车地点',
				backPlace: '请选择还车地点',
				takeDistance: '',
				backDistance: ''
			}
		},
		components: {
			RentingTime,
			citySelect
		},
		computed: {
			// 将vuex的state中的所有变量，解构到全局混入的mixin中
			...mapState(['currentAction', 'inBunding']),

		},
		onLoad(options) {
			let that = this
			//#ifdef APP-PLUS
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success(res) {
					that.city = res.address.district
				}
			})
			//#endif
		},
		onShow() {
			let userInfo = this.$store.state.userInfo
			if (userInfo !== '') {
				this.src = userInfo.avatar
			} else {
				this.src = ''
			}
		},
		onPullDownRefresh() {
			this.listForm.date = 10;
			this.lists = [];
			this._loadList('refresh');
		},
		// 上拉加载
		onReachBottom() {
			if (this.loadStatus == 'noMore') {
				return;
			}
			this.listForm.date += 3;
			this.loadStatus = 'loading';
			this._loadList('add');
			// uni.$emit('uOnReachBottom')
		},
		methods: {
			logout(){
				uni.clearStorage()
				uni.navigateTo({
					url: '/pages/user/login/login'
				})
			},
			toOrder(){
				uni.navigateTo({
					url: '/pages/user/order/order'
				})
			},
			logout(){
				uni.clearStorage()
				uni.navigateTo({
					url: '/pages/user/login/login'
				})
			},
			toAuditing(){
				uni.navigateTo({
					url: '/pages/user/auditing/auditing'
				})
			},
			toMyInfo(){
				uni.navigateTo({
					url: '/pages/user/myInfo/myInfo'
				})
			},
			toPublish(){
				uni.navigateTo({
					url: '/pages/user/publish/myPublish'
				})
			},
			toCar(){
				uni.navigateTo({
					url: '/pages/user/car/car'
				})
			},
			getDistance(address) {
				var reg = /.+?(省|市|自治区|自治州|县|区)/g; // 省市区的正则
				return address.match(reg);
			},
			cityChange(e) {
				this.city = e.area.label;
			},
			chooseRange(e) {
				console.log(e)
				this.$refs.RentingTime.beginDate = moment(e.startDate).format('YYYY-MM-DD')
				this.$refs.RentingTime.beginWeekday = moment(e.startDate).format('dddd')
				this.$refs.RentingTime.endDate = moment(e.endDate).format('YYYY-MM-DD')
				this.$refs.RentingTime.endWeekday = moment(e.endDate).format('dddd')
				this.$refs.RentingTime.span = "共" + moment(e.endDate).diff(moment(e.startDate), 'days') + "天"
			},
			chooseTakePlace: function() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.takePlace = res.address
						this.takeDistance = this.getDistance(res.address).join("")
					}
				})
			},
			chooseBackPlace: function() {
				uni.chooseLocation({
					success: (res) => {
						this.backPlace = res.address
						this.backDistance = this.getDistance(res.address).join("")
					}
				})
			},
			clear: function() {
				this.hasLocation = false
			},
			_nav() {
				uni.navigateTo({
					url: `/pages/features/carsSelect/carsSelect?takePlace=${this.takeDistance}&backPlace=${this.backDistance}&beginTime=${this.$refs.RentingTime.beginDate}&endTime=${this.$refs.RentingTime.endDate}`
				})
			},
			rentDatePicker() {
				uni.navigateTo({
					url: '/pages/features/rentDate/rentDate'
				})
			},
			locationPicker() {
				// debugger
				uni.navigateTo({
					url: '/pages/features/addressSelect/addressSelect'
				})
			},
			toggleUser() {
				this.userPanel = !this.userPanel
			},
			click(index) {
				// debugger
				this._config_href(this.banners[index]);

			},
			async _loadList(type) {
				let that = this;
				try {
					let res = await this.$api[this.baseKey](this.listForm)
					// console.log(res);
					if (type == 'add') {
						that.loadStatus = 'loading';
					} else {
						uni.stopPullDownRefresh();
					}
					if (res.Success) {
						if (type == 'add') {
							// 加载更多
							if (that.hasRow) {
								that.lists = that.lists.concat(res.Data[that.hasRow]);
								if (res.Data[that.hasRow].length < that.listForm.date) {
									that.loadStatus = 'noMore';
									// 没有数据了
								} else {
									that.loadStatus = 'more';
								}
							} else {
								debugger
								that.lists = that.lists.concat(res.Data);
								if (res.Data.length < that.listForm.date) {
									that.loadStatus = 'noMore';
									// 没有数据了
								} else {
									that.loadStatus = 'more';
								}
							}
						} else {
							// 刷新
							if (that.hasRow) {
								that.lists = res.Data[that.hasRow];
								if (res.Data[that.hasRow].length < that.formParams.pageSize) {
									that.loadStatus = 'noMore';
									// 没有数据了
								} else {
									that.loadStatus = 'more';
								}

							} else {
								that.lists = res.Data
								if (res.Data.length < that.formParams.pageSize) {
									that.loadStatus = 'noMore';
									// 没有数据了
								} else {
									that.loadStatus = 'more';
								}
							}
							that.refreshing = false
						}
						that.loadDataComplete(true, res.Data)
					} else {
						that.$ui.toast(res.Msg);
						that.loadDataComplete(false, res.Data)
					}
					that.pageLoading = false
				} catch (err) {
					console.log('请求结果false : ' + err);
					that.loadStatus = 'more';
					that.loadDataComplete(false)
					that.pageLoading = false
				}
			},
			// 二维码显示
			showModal(k) {
				switch (k) {
					case 1:
						if (!this.hasLogin) {
							this._login();
							break;
						}
						this.modalMsg = {
							content: '长按识别二维码，添加专属老师微信号进行报名',
							src: this.userInfo.consumer_qr_code
						}
						this.show = true
						break;
					case 2:
						this.modalMsg = {
							content: '长按识别二维码，关注微信公众号订阅开课通知',
							src: global_Set_zdjy.RQ_CodeList[0].Text
						}
						this.show = true
						break;
					default:
						break;
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.pages {
		width: 100vw;
		min-height: 100vh;
		padding-bottom: 80rpx;

		.header {
			height: 88rpx;
			width: 100vw;
			background-color: #fff;
			padding: 0 30rpx;
			position: sticky;
			top: 0;
			left: 0;
			z-index: 2;

			.header_area {
				margin: 0 10rpx 0 30rpx;
			}
		}

		.banner {
			width: 100%;
			height: 350rpx;
		}

		.line {
			width: 100%;
			height: 1rpx;
			background-color: #f8f8f8;
		}

		.content {
			padding: 20rpx;
			margin-top: -80rpx;
			position: relative;
			z-index: 1;

			.boxs {
				background-color: #fff;
				padding: 40rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.formItems {
					margin-bottom: 20rpx;

					.formLabal {
						line-height: 2;
						color: #888;
					}

					.formContent {
						line-height: 3;

						text {
							font-size: 36rpx;
							color: #333;
							margin-right: 20rpx;
							font-weight: 600;
						}

					}
				}


			}
		}

		.menus {
			border-radius: 20rpx;
			overflow: hidden;
			background-color: #fff;
			padding: 0 !important;

			.grid-text {
				font-size: 24rpx;
				margin-top: 20rpx;
				color: #333;
			}
		}


		.userBox {
			padding: 30rpx;

			.listBar {
				width: 100%;
				margin-top: 40rpx;
			}

			.licons {
				width: 40rpx;
				height: 40rpx;
			}
		}



		.warp {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;

			.rect {
				width: 90vw;
				height: 790rpx;
				border-radius: 12rpx;
				overflow: hidden;
				background-color: #fff;

				.maskHeader {
					width: 100%;
					background: linear-gradient(to top, #248EE9, #54ABF6);
					padding: 32rpx 53rpx;
					color: #fff;
				}

				.maskPic {
					width: 476rpx;
					height: 476rpx;
					margin: 30rpx auto;
				}
			}
		}



	}

	.title {
		color: $u-type-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>
